<template>
  <div id="app">
      <div class="sidebar">
          <card :package="package" ></card>
          <list :sessions="sessions" :package="package"></list>
      </div>
      <div class="main">
          <message :session="session"></message>
          <textInput></textInput>
      </div>
  </div>
</template>

<script>
import card from './components/card.vue'
import list from './components/list.vue'
import message from './components/message.vue'
import textInput from './components/textInput.vue'

export default {
  name: 'App',
  created : function(){
      //去除空格、空白符
      this.package.name = prompt('请输入名称').replace(/\s*/g,"").substr(0,5);
      if(!this.package.name){
          window.location.reload();
      }
      
      this.connect();
  },
  methods : {
      connect : function(){
          this.client = new WebSocket("ws://127.0.0.1:9553");
          this.client.onopen = this.on_open;
          this.client.onmessage = this.on_message;
          this.client.onclose = this.on_close;
      },
      on_open : function(){
            let that = this;
            //发送心跳
            setInterval(function(){
                that.package.event = 'heart';
                that.format_send();
            },50000);
            this.format_send();
      },
      //更新对话框
      update_session : function(){
        this.session = this.sessions[this.package.room];
      },
      //格式化发送
      format_send : function(){
        this.client.send(JSON.stringify(this.package));
      },
      //绑定房间
      update_room : function(room,new_room){
          for (let key in this.sessions){
              if(key === room){
                  this.$set(this.sessions,new_room,this.sessions[key]);
                  delete this.sessions[key];
              }
          }
      },

      on_message : function(evt){
          let data = JSON.parse(evt.data);
          if(data.event){
              switch (data.event) {
                  case 'bind':
                      this.bind_handle(data);
                      break;
                  case 'welcome':
                      if(this.package.user_id !== data.user['user_id']){
                          this.$set(this.sessions,data.user['user_id'],{name:data.user.name,messages:[]});
                      }
                      break;
                  case 'online':
                      this.online_handle(data);
                      break;
                  case 'room':
                      this.update_room(data.user_id,data.room);
                    break;
                  case 'out':
                      this.$delete(this.sessions,data.user_id);
                      break;
              }
          }
      },
      online_handle : function(data){
          for (let key in this.sessions){
              if(key === data['room']){
                  let temp = {};
                  temp.name = data.msg.name;
                  temp.content = data.msg.msg;
                  temp.date = data.msg.created_at;
                  if(data.user_id === this.package.user_id){
                      temp.self = true;
                  }
                  if(this.package.room !== data['room']){
                      let count = ('count' in this.sessions[data['room']] ? parseInt(this.sessions[data['room']].count) + 1 : 1);
                      this.$set(this.sessions[data['room']],'count',count)
                  }
                  this.sessions[data['room']].messages.push(temp);
                  this.update_session();
                  break;
              }
          }
      },
      bind_handle : function(data){
          this.package.user_id = data.user_id;
          this.package.room = data.room;
          let session = {};
          session.name = '微嗨';
          session.messages = [];
          //入栈消息
          for (let key in data.msg){
              let temp = {};
              temp.name = data.msg[key].name;
              temp.content = data.msg[key].msg;
              temp.date = data.msg[key].created_at;
              if(data.msg[key].user_id === this.package.user_id){
                  temp.self = true;
              }
              session.messages.push(temp);
          }
          //更新会话消息
          this.$set(this.sessions,data.room,session);
          this.update_session();
          //当前在线用户
          for (let key in data.live_users){
              if(this.package.user_id !== data.live_users[key]['user_id']){
                  this.$set(this.sessions,data.live_users[key]['user_id'],{name:data.live_users[key]['name'],messages:[]});
              }
          }
      },
      on_close : function(){

      },
      send_msg : function(val){
          this.package.msg = val;
          this.package.event = 'online';
          this.format_send();
      },
      //选择会话
      select_session : function(room){
          let new_room = room;
          if(room.indexOf('room') < 0){
              this.package.event = 'room';
              this.package.to_user_id = new_room;
              new_room = this.package.user_id+'_'+new_room+'_room';
              this.package.room = new_room;
              this.format_send();
              this.update_room(room,new_room);
          }
          this.package.room = new_room;
          this.$delete(this.sessions[this.package.room],'count');
          this.update_session();
      }
  },
  data : function(){
    return {
        client : {},
        package : {
            event : 'bind',
            msg : '',
            name : '',
            user_id : 0,
            room : ''
        },
        session : {},
        sessions : {},
    };
  },
  components: {
    card,list,message,textInput
  }
}
</script>

<style lang="less" scoped>
    #app {
        margin: 20px auto;
        width: 800px;
        height: 600px;

        overflow: hidden;
        border-radius: 3px;

        .sidebar, .main {
            height: 100%;
        }
        .sidebar {
            float: left;
            width: 200px;
            color: #f4f4f4;
            background-color: #2e3238;
        }
        .main {
            position: relative;
            overflow: hidden;
            background-color: #eee;
        }
        .text {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
        }
        .message {
            height: ~'calc(100% - 160px)';
        }
    }
</style>
